<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：
 参数：tableTitle 页面的title
      thead 表格标题
      gridColumns 表格展现需要取的字段
      tableRows 数据集合
      tableHeight tablecontent容器所占屏幕的高度，例：父组件中通过 table-height="'60vh'"
 事件：点击thead对表格进行排序
-->
<template>
  <div class="table-view">
    <p class="table-title" v-if="tabletitle">{{tableTitle}}</p>
    <table class="table-head">
      <tr>
        <td rowspan="2" class="firstcol">三级指标</td>
        <td colspan="2" @click="$emit('select_product', 0)">{{productA.replace('|', '')}}</td>
        <td colspan="2" @click="$emit('select_product', 1)">{{productB.replace('|', '')}}</td>
      </tr>
      <tr style="border-top: 1px solid #FFF;">
        <td>提及率</td>
        <td>差评率</td>
        <td>提及率</td>
        <td>差评率</td>
      </tr>
    </table>
    <div class="table-content" :style="{height:tableHeight}" v-if="tableRows.length > 1">
      <table>
        <tbody>
        <!--<tr v-for="row in tableRows  | orderBy sortBykey sortOrders[sortKey]" :id="row.id">-->
        <tr v-for="row in tableRows" :id="row.id">
          <td v-for="item in gridColumns"
              :class="[{'firstcol': $index == 0}]">
            <span v-if="row[item] === true"
                  @click="delete($parent.row.contrast_id, $parent.$index)"
                  class="joined"><icon type="success"></icon></span>
            <span v-if="row[item] === false"
                  @click="add($parent.row.category_id, $parent.row.model, $parent.row.brand, $parent.row.index)"
                  class="notjoined"><icon
              type="success"></icon></span>
            <span v-if="row[item] !== 'true' && row[item] !== 'false'" v-html="row[item]"></span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
   <!--  <div class="item-data" v-if="tableRows.length < 1">
      暂无相关数据
    </div> -->
  </div>
</template>

<script>
  export default{
    props: ['tableTitle', 'thead', 'gridColumns', 'tableRows', 'tableHeight', 'productA', 'productB'],
    data () {
      // var sortOrders = {}
      // this.gridColumns.forEach(function (key) {
      //   sortOrders[key] = 1
      // })
      return {
        // sortKey: '',
        // sortOrders: sortOrders,
        noData: false
      }
    },
    methods: {
      // sortBykey: function (a, b) {
      //   return Math.floor(a[this.sortKey]) - Math.floor(b[this.sortKey])
      // },
      // sortBy: function (key) {
      //   var activeTheadIndex = 0
      //   for (var i = 0; i < this.thead.length; i++) {
      //     if (this.thead[i] === key) {
      //       activeTheadIndex = i
      //     }
      //   }
      //   this.sortKey = this.gridColumns[activeTheadIndex]
      //   this.sortOrders[this.gridColumns[activeTheadIndex]] = this.sortOrders[this.gridColumns[activeTheadIndex]] * -1
      // }
    },
    events: {},
    ready: function () {
    },
    watch: {
    }
  }
</script>

<style lang="scss" scoped>
  .table-view {
    position: relative;
    box-sizing: border-box;
    font-size: 1rem;
    color: #999;

    .table-head{
      background: #E4F0FF;

      .firstcol{
        width: 20%;
        background: #E4F0FF;
        border-right: 1px solid #FFF;
      }

      tr:nth-child(1){
        td:nth-child(2){
          width: 40%;
          border-right: 1px solid #FFF;
        }

        td:nth-child(3){
          width: 40%;
        }
      }
      tr:nth-child(2){
        td:nth-child(2){
          border-right: 1px solid #FFF;
        }
      }
    }

    .table-content {
      height: 50vh;
      overflow-y: scroll;
      background: #FAFCFF;

      .firstcol{
        width: 20%;
        background: #FFF;
      }
    }

    p.table-title {
      padding-left: .2rem;
      width: 100%;
      text-align: left;
      font-size: .35rem;
      height: .5rem;
      line-height: .5rem;
      margin-top: .2rem;
    }

    table {
      width: 100%;
      font-size: .20rem;
      border-collapse: collapse;
      border-spacing: 0;

      tr {
        height: 1rem;

        td {
          text-align: center;
          font-size: .25rem;
          vertical-align: middle !important;
          padding: .1rem;
          text-align: center;
        }
      }
    }
  }
</style>
